<template>
  <div id="order_list_container">
    <header-nav headTitle="My Order" go-back="true"></header-nav>
    <ul class="order_list" v-if="orderList.length">
      <li v-for="(item, index) in orderList" :key="index">
        <p>Order Time: {{ item.order_time }}</p>
        <p>Order: <span class="bold">{{ item.order_id }}</span></p>
        <ul class="pro">
          <li v-for="(pro, index) in item.cart.groups">
            <img :src="productBaseUrl + pro.image" alt="">
            <p>{{pro.name}}</p>
          </li>
        </ul>
        <p class="green">Order is successful</p>
      </li>
    </ul>
    <p v-else>Have no order!</p>
  </div>
</template>

<script>
  import HeaderNav from '../../../components/HeaderNav.vue'
  import FooterNav from '../../../components/FooterNav.vue'
  import { getOrderList } from '../../../service/getData'
  import { getStore } from '../../../config/mUtils'
  export default {
    data() {
      return {
        orderList: null,
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/',
      }
    },
    components: {
      HeaderNav,
      FooterNav
    },
    created() {
      this.initData()
    },
    methods: {
      async initData() {
        let user_id = Number(getStore('user_id'))
        await getOrderList(user_id).then(res => {
          this.orderList = res.data
          console.log(this.orderList)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../style/mixin';
  #order_list_container {
    padding-top: 1.9rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 10rem;
    height: 100%;
    z-index: 101;
    background-color: #fff;
  }
  .order_list {
    background-color: #fff;
    margin: 0.4rem auto;
    padding: 0.3rem 5%;
    li {
      background-color: #fff;
      @include sc(0.5rem, #434343);
      p {
        font-size: 0.65rem;
      }
      .bold {
        font-weight: bold;
      }
      .pro {
        li {
          @include fj;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 100px;
          }
          p {
            font-size: 0.5rem;
          }
        }
      }
    }
  }
  .green {
    color: #7ec801;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;
  }
  .close_btn {
    display: block;
    width: 100%;
    background-color: #999;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
  .router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
  }
  .router-fade-enter, .router-fade-leave-active {
    opacity: 0;
  }
</style>
